{% extends 'layout.html' %}

{% block title %}{{title}}{% endblock %}

{% block content %}


    <div id="notice" class="hbox hbox-auto-xs hbox-auto-sm">
        <!-- main -->
        <div class="col w bg-light dker bg-auto">
            <h4 class="m-n wrapper">通知中心</h4>
            <ul id="notice-content" class="list-group no-radius no-border no-bg list-group-lg">
                <li id="triggle-all" v-on="click:noticedata('all',$event)" class="list-group-item active">
                    <a class="m-r-sm pull-left">
                        <i class="fa fa-inbox"></i>
                    </a>

                    <div class="clear text-ellipsis">
                        <span>所有通知</span>
                        <span class="text-muted"> -- 04:35</span>
                    </div>
                </li>
                <li v-on="click:noticedata('unread',$event)" class="list-group-item">
                    <a class="m-r-sm pull-left">
                        <i class="fa fa-envelope"></i>
                    </a>

                    <div class="clear text-ellipsis">
                        <span>未读通知</span>
                        <span class="text-muted"> -- 04:15</span>
                    </div>
                </li>
                <li v-on="click:noticedata('at',$event)" class="list-group-item">
                    <a class="m-r-sm pull-left">
                        <i class="fa fa-heart"></i>
                    </a>

                    <div class="clear text-ellipsis">
                        <span>提到我的</span>
                        <span class="text-muted"> -- 02:25</span>
                    </div>
                </li>
                <li v-on="click:noticedata('comment',$event)" class="list-group-item">
                    <a class="m-r-sm pull-left">
                        <i class="fa fa-comment"></i>
                    </a>

                    <div class="clear text-ellipsis">
                        <span>评论</span>
                        <span class="text-muted"> -- 05:00</span>
                    </div>
                </li>
                <li v-on="click:noticedata('system', $event)" class="list-group-item">
                    <a class="m-r-sm pull-left">
                        <i class="fa fa-bell"></i>
                    </a>

                    <div class="clear text-ellipsis">
                        <span>系统通知</span>
                        <span class="text-muted"> -- 03:50</span>
                    </div>
                </li>
            </ul>
        </div>
        <!-- / main -->
        <!-- right col -->
        <div class="col">
            <div class="wrapper">

                <div class="b-b wrapper">
                    <!--<a href="" class="btn btn-sm btn-default pull-right">标记本页为已读</a>-->

                    <a href="javascript:;"  v-on="click:flagAll" class="btn btn-sm btn-danger pull-right m-r-sm">标记所有为已读</a>

                    <h1 class="m-n font-thin h3">所有通知</h1>
                </div>


            </div>

            <div class="tab-content wrapper-md hidden-print">



                    <ul v-cloak class="list-group alt">
                        <li v-if="!notices" class="list-group-item text-center" style="background: none;border: none">无数据</li>


                        <li  v-repeat="notice:notices" class="list-group-item (% notice.hasRead ? 'read':'' %)" notice_id="(% notice.id %)">

                            <a v-on="click:already" pp-href="/(% notice.type %)/(% notice.rid %)#(% notice.location %)" class="already clear">
                                    <small class="pull-right" v-text="notice.noticeAt"></small>
                                    <small v-if="notice.hasReply" ><span class="text-info" v-text="notice.source"></span> 在《(%notice.operate%)》上@了你。</small>
                                    <small v-if="!notice.hasReply"><span class="text-info" v-text="notice.source"></span> 在你的《(%notice.operate%)》上有了新回复。</small>
                            </a>

                        </li>

                    </ul>



            </div>


        </div>
        <!-- / right col -->
    </div>


{% endblock %}
{% block loadjs %}
<script>
    //already
    require(['notification/noticecore.min']);
</script>
{% endblock %}
